import { useCallback } from 'react';
import { Text, View } from "@tarojs/components";
import i18n from "i18n-js";
import Taro from "@tarojs/taro";
import { GStyleSheet, DynamicColors } from "@/utils/DarkMode";
import { GButton } from '@/components/GButton';
import { supportExperienceCenter } from '@/config/template';

const experienceIcon = 'https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/375869/media/home_photo_1658903526169.png';

const dstyle = GStyleSheet.create({
  title: {
    color: DynamicColors.subTitleTextColor
  },
  container: {
    flexDirection: 'column',
    flex: '1',
    height: '100%',
    // justifyContent: 'flex-start',
    justifyContent: 'space-between'
  },
  visualCard: {
    height: 150,
    width: '100%',
    // width: 320,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'contain',
    backgroundPosition: '50% 0%',
    backgroundImage: `url(${experienceIcon})`,
    borderRadius: 10,
    // marginBottom: 220,
  },
  visualCardText: {
    color: DynamicColors.titleTextColor,
    fontWeight: 500,
    fontSize: 20,
    position: 'relative',
    left: 20,
    top: 30,
  }
});


const NoneDevices = ({ showAddIcon, onPress }: { showAddIcon: boolean, onPress: () => void }) => {

  const styles = dstyle.useDynamicStyle();

  const support = supportExperienceCenter();

  const goToExperienceCenter = useCallback(() => {
    Taro.navigateTo({ url: '/pages/experienceCenter/index' })
  }, [])

  return (
    <View style={styles.container} className='centerFlex'>
      <View style={{ padding: 15, width: '100%', boxSizing: 'border-box' }}>
      <View style={styles.visualCard} onClick={support ? goToExperienceCenter : undefined}>
        {support && <Text style={styles.visualCardText}>{i18n.t('VIRTUAL_DEVICE_EXPERIENCE')}</Text>}
      </View>
      </View>
      <GButton
        text={showAddIcon ? i18n.t('ADD_DEVICE') : i18n.t('SCAN_TO_ADD')}
        style={{ marginTop: 20, width: '50%' }}
        onPress={onPress}
      />
      <View></View>
    </View>
  );
};

export default NoneDevices;
